<template>
  <div id="qq-map"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    center: {
      type: Object,
      default: () => ({ lng: 120.61456524669649, lat: 31.345347435103882 }),
    },
    zoom: {
      type: Number,
      default: 12,
    },
    markerList: {
      type: Array,
      default: () => [],
    },

    //
    //
  },
  created() {},
  mounted() {
    this.initMap();
  },
  components: {
  },
  methods: {
    initMap() {
      //定义地图中心点坐标
      var center = new TMap.LatLng(this.center.lat, this.center.lng);
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new TMap.Map(document.getElementById("qq-map"), {
        center: center, //设置地图中心点坐标
        zoom: this.zoom, //设置地图缩放级别
        pitch: 0, //设置俯仰角
        rotation: 0, //设置地图旋转角度
        //  geometries: [
        // {position: new TMap.LatLng(31.25498,120.73248)},
        //....将您所有要打到图中的坐标点传入进来
    // ],
      });
         // 创建点聚合实例
      var markerCluster = new TMap.MarkerCluster({
        id: 'cluster',
        map: map,
        enableDefaultStyle: true, // 启用默认样式
        minimumClusterSize: 2, // 形成聚合簇的最小个数
      geometries: [{ // 点数组
            position: new TMap.LatLng(31.378049,121.119648)
          },
          {
            position: new TMap.LatLng(31.252511,120.974077)
          },
             {
            position: new TMap.LatLng(31.299461,120.691173)
          },
   {
            position: new TMap.LatLng(31.259526,120.736947)
          },
             {
            position: new TMap.LatLng(31.279215,120.740632)
          },
             {
            position: new TMap.LatLng(31.262283,120.75)
          },
          
        ],
        zoomOnClick: true, // 点击簇时放大至簇内点分离
        gridSize: 60, // 聚合算法的可聚合距离
        averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
        maxZoom: 10 // 采用聚合策略的最大缩放级别
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.qq-map {
  width: 100%;
  height: 100%;
}
</style>